<style lang="less">
@import './style.less';
</style>

<template>
    <div class="department">
        <tree-ex
            treeTitle="部门管理"
            :data="departements"
            :props="defaultProps"
            :default-expanded-keys="defaultExpandedKeys"
            :onNodeClick="nodeClick"
            :onOperation="operationClick"
            :operations="departOperations" />

        <dialog-ex
            v-if="!!dialogModal"
            :title="this.dialogModal === 'add' ? '新增部门' : '编辑部门'"
            :form="form"
            :mode="dialogModal"
            :init="currentDepar" />
    </div>
</template>

<script>
    import { mapGetters, mapActions, mapMutations } from 'vuex'
    import { Message } from 'element-ui'
    import pageConfig from './config'

    import treeEx from '@/components/tree/treeEx'
    import dialogEx from '@/components/dialog/dialogEx'

    export default {
        name: 'department',
        components: {
            'tree-ex': treeEx,
            'dialog-ex': dialogEx
        },
        data() {
            return {
                dialogModal: '',
                currentDepar: null,
                defaultExpandedKeys: [],
                departOperations: pageConfig.departOperations,
                defaultProps: {
                    label: 'title',
                    children: 'children'
                },
                form: {
                    items: pageConfig.formItems,
                    actions: {
                        cancel: () => {
                            this.dialogModal = ''
                        },
                        confirm: (data, mode) => {
                            console.log(data)
                            if (data.sequence >= 1) {
                                this.dialogModal = ''
                                if (this.currentDepar) {
                                    this.defaultExpandedKeys = [this.currentDepar.id]
                                }
                                if (mode === 'add') {
                                    let params = {
                                        sequence: data.sequence,
                                        title: data.title,
                                        parentId: this.currentDepar ? this.currentDepar.id : '0'
                                    }
                                    this.addDepartement(params)
                                }
                                if (mode === 'edit') {
                                    let params = {
                                        id: this.currentDepar.id,
                                        sequence: data.sequence,
                                        title: data.title,
                                        parentId: this.currentDepar.parentId
                                    }
                                    this.editDepartement(params)
                                }
                            } else {
                                Message({
                                    center: true,
                                    type: 'warning',
                                    message: '请输入大于1的排序'
                                })
                            }

                        }
                    }
                }
            }
        },

        /**
         * 生命钩子
         **/
        created() {
            this.loadData()
        },
        mounted() {},

        /**
         * 计算
         **/
        computed: {
            ...mapGetters(['departements'])
        },
        /**
         * 监控
         **/
        watch: {},

        /**
         * 事件
         **/
        methods: {

            ...mapActions(['getDepartements', 'addDepartement', 'editDepartement', 'removeDepartement']),
            // ...mapMutations([]),

            loadData() {
                this.getDepartements()
            },

            nodeClick(e) {
                this.currentDepar = e
            },

            operationClick(oper) {
                let prop = oper.prop
                switch(prop) {
                    case 'refresh':
                        this.getDepartements()
                        break
                    case 'add':
                        this.dialogModal = 'add'
                        break
                    case 'edit':
                        this.dialogModal = 'edit'
                        break
                    default:
                        let params = {
                            lIds: [
                                this.currentDepar.id
                            ]
                        }
                        this.removeDepartement(params)
                }
            }
        }
    }
</script>
